<template>
  <div>
    <!-- <h2>{{ this.id ? "修改账号：" : "创建账号：" }}</h2> -->
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="账号名称" prop="account">
        <el-input
          type="text"
          v-model="ruleForm.account"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          type="password"
          v-model="ruleForm.password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="账号类型">
        <el-select v-model="ruleForm.type" placeholder="请账号类型">
          <el-option label="普通用户" value="1"></el-option>
          <el-option label="超级管理员" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户头像">
        <el-upload
          action="http://www.zhengwei66.cn/admin/api/upload"
          :headers="getAuthHeader()"
          list-type="picture-card"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="ruleForm.file" :src="ruleForm.file" class="avatar" />
          <i v-else class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">确认</el-button>
        <el-button @click="resetForm" v-if="!this.id">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAccountadd, getAccountforbid, getOneaccount } from "@/api/index.js";
export default {
  props: ["id"],
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入账号密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        account: "",
        password: "",
        type: "1",
      },
      rules: {
        account: [
          { required: true, message: "请输入账号名称", trigger: "blur" },
        ],
        password: [
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id && this.getEdituser();
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.id) {
            getAccountforbid(this.id, this.ruleForm).then((res) => {
              if (res.data.status == 200) {
                this.$message.success(res.data.msg);
                this.$router.push("/accountList");
              }
            });
          } else {
            getAccountadd(this.ruleForm).then((res) => {
              if (res.data.status == 401) {
                this.$message.info(res.data.msg);
              } else {
                this.$message.success(res.data.msg);
                this.ruleForm.file = "";
                this.$refs.ruleForm.resetFields();
                this.$router.push("/accountList");
              }
            });
          }
        } else {
          this.$message.error("请将信息填写完整哦~");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    // 上传图片成功
    handleAvatarSuccess(res) {
      console.log(res);
      this.$set(this.ruleForm, "file", res.url);
    },
    getEdituser() {
      getOneaccount(this.id).then((res) => {
        this.ruleForm = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 148px;
  height: 148px;
}
</style>
